<template>
	<div class="photos_bar">
		<div class="title">
			<h4>剧照</h4>
			<div @click="show = true">
				{{ photos === undefined ? '' : '全部(' + photos.length + ')' }}
			</div>
			<van-overlay :show="show" @click="show = false">
				<div class="over" v-for="(item, index) in photos" :key="index">
					<div class="overlayimg" @click="image(index)">
						<img class="overimg" :src="item" alt="" />
					</div>
				</div>
			</van-overlay>
		</div>
		<div v-if="photos === undefined" class="isNull">暂无电影剧照</div>
		<div v-else>
			<van-swipe :width="160" :loop="false" :show-indicators="false">
				<template>
					<van-swipe-item v-for="(item, index) in photos" :key="index">
						<div class="itemImg" @click="image(index)">
							<img class="img" :src="item" alt="" />
						</div>
					</van-swipe-item>
				</template>
			</van-swipe>
		</div>
	</div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
	data() {
		return {
			show: false,
		}
	},
	props: ['photos'],
	components: {
		[ImagePreview.Component.name]: ImagePreview.Component,
	},
	methods: {
		image(index) {
			ImagePreview({
				images: this.photos,
				startPosition: index,
				closeable: true,
			})
		},
	},
}
</script>

<style lang="less" scoped>
.photos_bar {
	width: 100%;
	padding: 15px;
	margin-bottom: 50px;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px;
		h4 {
			color: #191a1b;
			font-size: 16px;
		}
		div {
			color: #797d82;
			font-size: 13px;
		}
	}
	.isNull {
		width: 100%;
		height: 210px;
		color: #ccc0c5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.itemImg {
	width: 150px;
	height: 100px;
	overflow: hidden;
	.img {
		width: 150px;
	}
}

.over {
	width: 90px;
	margin: 10px 10px;
	float: left;
	.overlayimg {
		display: flex;
		justify-content: space-between;
		width: 90px;
		height: 90px;
		img {
			width: 90px;
		}
	}
}
</style>
